<template>
    <div class="cardContent">
        <a-button type="primary" @click="openModal({},'新增生产任务')">新增</a-button>
        <a-table :dataSource="produceList"
                 style="margin-top: 10px"
                 :columns="columns"
                 :pagination="false"
                 size="small"
                 bordered>
            <template #bodyCell="{text,record,index,column}">
                <template v-if="column.key == 'status'">
                    <a-switch v-model:checked="record.status"
                              @change="switchChange(record)"
                              checked-children="激活"
                              un-checked-children="停止"
                              :checked-value="1"
                              :un-checked-value="0"/>
                </template>
                <a-space v-if="column.key == 'action'">
                    <a-button type="primary" @click="openModal(record,'编辑')">编辑</a-button>
                    <a-popconfirm
                            title="是否确认删除?"
                            ok-text="是"
                            cancel-text="否"
                            @confirm="okDelete(record.id)"
                    >
                        <a-button type="danger">删除</a-button>
                    </a-popconfirm>
                </a-space>
            </template>
        </a-table>
    </div>
    <a-drawer
            v-model:visible="visible"
            class="custom-class"
            width="600"
            :title="drawerTitle"
            placement="right"
            :footer-style="{textAlign: 'right'}"
    >
        <a-form
                :model="produce"
                name="basic"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 18 }"
                autocomplete="off">
            <a-form-item v-if="drawerTitle == '新增生产任务'" label="产品" v-bind="validateInfos.productId">
                <a-select :options="productList"
                          :field-names="{label: 'name', value: 'id'}"
                          v-model:value="produce.productId"/>
            </a-form-item>
            <a-form-item v-else label="产品名称">
                <a-input v-model:value="produce.productName" disabled></a-input>
            </a-form-item>
            <a-form-item label="每天生产数量" v-bind="validateInfos.quantity">
                <a-input-number :min="1" v-model:value="produce.quantity"/>
            </a-form-item>
            <a-form-item label="状态">
                <a-switch v-model:checked="produce.status"
                          :checked-value="1"
                          :un-checked-value="0"
                          checked-children="激活"
                          un-checked-children="停止"/>
            </a-form-item>
        </a-form>
        <template #footer>
            <a-space>
                <a-button type="default" @click="visible = false">取消</a-button>
                <a-button type="primary" @click="saveOrUpdate">保存</a-button>
            </a-space>
        </template>
    </a-drawer>
</template>

<script>
    import {SmileOutlined} from "@ant-design/icons-vue";
    import {onMounted, ref} from "vue";
    import axios from "axios";
    import {Form, message} from "ant-design-vue";
    import store from "@/store";

    export default {
        name: "ProducePlan",
        components: {
            SmileOutlined
        },
        setup() {
            const columns = [
                {
                    title: 'ID',
                    dataIndex: 'id',
                    key: 'id',
                    align: 'center',
                },
                {
                    title: '产品名称',
                    dataIndex: 'productName',
                    key: 'productName',
                    align: 'center',
                },
                {
                    title: '每天生产数量',
                    dataIndex: 'quantity',
                    key: 'quantity',
                    align: 'center'
                },
                {
                    title: '状态',
                    dataIndex: 'status',
                    key: 'status',
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                }
            ]
            const loginUser = ref({})
            const produce = ref({
                productId: undefined,
                quantity: undefined
            })
            const produceList = ref()
            const productList = ref([])
            const visible = ref(false);
            const drawerTitle = ref('');

            const useForm = Form.useForm
            const {validate, validateInfos, resetFields, validateField, rulesRef} = useForm(produce, ref({
                productId: [{required: true, message: '请选择产品', trigger: ['change']}],
                quantity: [{required: true, message: '请输入生产数量', trigger: ['change']}],
            }))

            const saveOrUpdate = () => {
                validate().then(() => {
                    console.log("通过校验")
                    axios.post('/produce/saveOrUpdate', produce.value).then(rs => {
                        console.log("新增或修改结果：", rs)
                        if (rs.code == 200) {
                            visible.value = false
                            message.success("操作成功")
                            load()
                        } else {
                            message.error(rs.message)
                        }
                    })
                }).catch(() => {
                    console.log("校验失败")
                })


            }

            const switchChange = (record) => {
                console.log("数据", record)
                produce.value = record
                saveOrUpdate()
            }

            const okDelete = (id) => {
                console.log("要删除的ID：" + id)
                axios.delete('/produce/deleteById/' + id).then(rs => {
                    if (rs.code == 200) {
                        message.success("删除成功")
                        load()
                    } else {
                        message.error(rs.message)
                    }
                })
            }

            const openModal = (obj, message) => {
                console.log("模态框参数：", obj)
                produce.value = JSON.parse(JSON.stringify(obj))
                if (message == '新增生产任务') {
                    resetFields()
                    axios.get('product/queryNotProducePlan').then(rs => {
                        productList.value = rs.data
                        drawerTitle.value = '新增生产任务'
                        visible.value = true;
                    })
                } else {
                    drawerTitle.value = '编辑'
                    visible.value = true;
                }
            }

            const load = () => {
                axios.get('/produce/queryAll').then(rs => {
                    console.log("查找结果：", rs)
                    produceList.value = rs.data
                })
            }

            onMounted(() => {
                loginUser.value = store.state.user
                load()
            })
            return {
                columns,
                produce,
                produceList,
                load,
                visible,
                openModal,
                saveOrUpdate,
                okDelete,
                drawerTitle,
                productList,
                switchChange,
                validateInfos
            }
        }
    }
</script>

<style scoped>
    .cardContent {
        background: #fff;
        margin: 10px 10px 0 10px;
        padding: 15px;
    }
</style>